<template>
	<view id="content-buy">
		<view class="content-box">
			<view class="">
				<view class="vip-li" >
					<image src="/static/icon/bg_yueka_vip_01.png" v-if="vipObj.rankId  == 2" class="vip-bg" mode=""></image>
					<image src="/static/icon/bg_yueka_vip_02.png" v-if="vipObj.rankId == 3" class="vip-bg" mode=""></image>
					<view class="vip-row">
						<view class="left">
							<view class="name">{{vipObj.rankName}}</view>
							<view class="name">¥{{vipObj.price || 0}}</view>
						</view>
						<view></view>
					</view>
				</view>
				<!-- <view class="vip-li" v-if="vipType == 2">
					<image src="/static/icon/bg_yueka_vip_02.png" class="vip-bg" mode=""></image>
					<view class="vip-row">
						<view class="left">
							<view class="name">铂金</view>
							<view class="name">¥9999</view>
						</view>
						<view></view>
					</view>
				</view> -->
			</view>
			
			<h5>{{vipObj.rankId == 2?'钻石':'铂金'}}</h5>
			<view class="content-text">
				{{vipObj.description}}
			</view>
			
		</view>
		
		<view class="content-footer">
			<view class="footer-btn" @click="openPopup()">购买</view>
		</view>
		
		<!-- 密码弹框 -->
		<uni-popup ref="payPopup" type="center" :mask-click="true">
			<view class="pay-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">支付密码</view>
					<view></view>
				</view>
				<view class="pas-box">
					<view class="popup-pas">
						<input type="password" v-model="payPwd"  placeholder-style="color: #BBC0CB;" placeholder="请输入支付密码" />
					</view>					
				</view>
				<view class="popup-btn">
					<view class="btn" @click="closeFn()">取消</view>
					<view class="btn" @click="buyFn()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		userInfo
	} from "@/common/loadUserInfo.js"
export default {
	data() {
		return {
			cid: '',
			vipType: 1,
			payPwd: '',
			vipObj: {},
			userInfo: {},
		};
	},
	onLoad(e) {
		this.cid = e.cid;
		// if(uni.getStorageSync('vipArr')){
		// 	let arr = JSON.parse(uni.getStorageSync('vipArr'))
		// 	this.vipObj = arr.find(v=>{
		// 		return v.rankId == this.cid;
		// 	})
		// 	console.log(JSON.stringify(this.vipObj))
		// }
		this.getDetail()
	},
	components: {
		uniPopup
	},
	onShow() {
		var that = this;
		userInfo({
			success: (res) => {
				that.userInfo = res.data.userinfo
				uni.setStorageSync('userDetail', that.userInfo)
			},
			fail: (err) => {
			}
		})
	},
	methods: {
		closeFn(){
			this.payPwd = '';
			this.$refs.payPopup.close()
		},
		// 获取详情
		getDetail(){
			this.$Request.request('/api/user_rank/detail','get',{id:this.cid}).then((res)=>{
				if(res.status == 1){
					// console.log(res)
					this.vipObj = res.data;
				}
			})
		},
		// 打开弹框
		openPopup(){
			if(!this.userInfo.payPwd){
				uni.showModal({
					title: '提示',
					content: '您未设置支付密码，请先设置密码',
					success: (res)=> {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.navigateTo({
								url: '/subPackage/payPwd/payPwd?type=reset'
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			}else {
				this.$refs.payPopup.open()
			}
		},
		// 购买
		buyFn(){
			if(!this.payPwd){
				return this.$api.msg('请输入支付密码')
			}
			this.$Request.request('/api/user_rank/buy','post',{id:this.cid,payPwd:this.payPwd}).then((res)=>{
				if(res.status == 1){
					this.$refs.payPopup.close()
					this.$api.msg('购买成功')
					setTimeout(()=>{
						this.payPwd = '';
						// uni.redirectTo({
						// 	url: `/pages/user/vip/record`
						// })	
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	}
};
</script>


<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-box {
		padding: 34rpx 32rpx 0px;
		box-sizing: border-box;
	}
	.vip-li {
		width: 100%;
		height: 172rpx;
		position: relative;
		// margin-bottom: 38rpx;
		.vip-bg {
			width: 100%;
			height: 172rpx;
		}
		.vip-row {
			width: 100%;
			height: 172rpx;
			position: absolute;
			left: 0px;
			top: 0px;
			padding: 0px 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				.name {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 50rpx;
					margin-bottom: 12rpx;
				}
			}
			// .arrow-r {
			// 	width: 36rpx;
			// 	height: 36rpx;
			// }
		}
	}
	
	h5 {
		padding: 48rpx 0px 40rpx;
		font-size: 36rpx;
		color: #000;
		line-height: 50rpx;
	}
	.content-text {
		font-size: 28rpx;
		color: #000;
		line-height: 40rpx;
	}
	
	.content-footer {
		position: fixed;
		width: 100%;
		z-index: 11;
		bottom: 62rpx;
		left: 0px;
		padding: 0px 54rpx;
		box-sizing: border-box;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #EE486C;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
	}
	
	.pay-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 0upx 12rpx;
		box-sizing: border-box;
		.popup-top {
			padding: 0px 30upx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
		}
		.pas-box {
			padding: 0px 30upx;
			box-sizing: border-box;
		}
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-btn {
			display: flex;
			align-items: center;
			padding-top: 10rpx;
			border-top: 2rpx solid rgba(0, 0, 80, 0.05);
			.btn {
				width: 50%;
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				color: #909090;
			}
			.btn:last-child {
				color: #EE486C;
				border-left: 2rpx solid rgba(0, 0, 80, 0.05);
			}
		}
	}
	
</style>
